<template>
  <div class="banner">
    <swiper :options="swiperOption" >
      <swiper-slide v-for="item of swiperUrl" :key="item.id">
        <img :src="item.url" />
      </swiper-slide>
      <div class="swiper-pagination"  slot="pagination"></div>
    </swiper>
  </div>
</template>
<script>
  export default {
    data() {
      return {
        swiperOption:{
          pagination: {
            el: '.swiper-pagination'
          },
          // autoplay:true,
          autoplay: {
            delay: 1000,
            stopOnLastSlide: false,
            disableOnInteraction: false,
          },
        },
        loop:true,

        // "swiperUrl":[
        //   {
        //     "id":"01",
        //     url:require("@/assets/img/1.jpg")
        //   },
        //   {
        //     "id":"02",
        //     url:require("@/assets/img/2.jpg")
        //   },
        //   {
        //     "id":"03",
        //     url:require("@/assets/img/3.jpg")
        //   },
        // ]

      }
    },
    props:['swiperUrl']
  }
</script>
<style scoped>
  .banner{
    width:100%;
    height:0;
    padding-bottom:26.67%;
    background-color: #eee;
    overflow:hidden;
   padding-top:.44rem;
  }
  .banner img{
    width:100%;
    height:100%;
    /*height:26.67%;*/
  }
 .banner >>>.swiper-pagination-bullet-active {
    background: #fff;
  }

</style>
